<template>
    <view style="height: 100%">
        <view :class="'l-class radio-group radio-group-' + placement">
            <slot></slot>
        </view>
        <l-error-tip l-error-text-class="l-error-text l-error-text-class" :errorText="errorText" v-if="errorText" />
    </view>
</template>

<script>
import lErrorTip from '../error-tip/index';
import lRadio from '../radio/index';
import eventBus from '../core/utils/event-bus';
import rules from '../behaviors/rules';
export default {
    unicomGroup: ['radio'],
    data() {
        return {
            currentLength: 0,
            errorText: ''
        };
    },
    externalClasses: ['l-class', 'l-error-text', 'l-error-text-class'],
    mixins: ['wx://form-field', rules],
    relations: {
        '../radio/index': {
            type: 'child',
            linked() {
                this.init();
            },
            linkChanged() {},
            unlinked() {
                this.init();
            }
        }
    },
    props: {
        current: {
            type: String
        },
        noneChecked: {
            type: Boolean,
            default: true
        },
        placement: {
            type: String,
            default: 'column'
        }
    },
    methods: {
        checkedKeyRepeat(e) {
            let t = e.map((e) => e.data.key);
            const r = this.isRepeat(t);
            if (false !== r) {
                throw new Error('keys有重复元素, radio的key属性不能重复：' + r);
            }
        },
        isRepeat(e) {
            let t = {};
            for (let r in e) {
                if (t[e[r]]) {
                    return e[r];
                }
                t[e[r]] = true;
            }
            return false;
        },
        init() {
            const e = this.getRelationNodes('radio');
            this.checkedKeyRepeat(e);
            this.onChangeHandle(e);
        },
        onChangeHandle(e) {
            e.forEach((e) => {
                let t = this.current === e.data.key;
                e.setChecked(t, e.data.key);
            });
        },
        onEmitEventHandle(e, t) {
            if (t) {
                this.current = e.key;
            } else {
                this.current = null;
            }
            const r = this.getRelationNodes('radio');
            this.onChangeHandle(r);
            Object.assign(e, {
                currentKey: this.current
            });
            this.validatorData({
                [this.name]: this.current
            });
            this.$emit(
                'linchange',
                {
                    detail: e
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            eventBus.emit('lin-form-change-' + this.id, this.id);
        },
        getValues() {
            return this.current;
        },
        reset() {
            this.current = '';
        }
    },
    watch: {
        current: function () {
            this.init();
        }
    },
    created: function () {}
};
</script>
<style>
.radio-group {
    width: 100%;
}
.radio-group-row {
    display: flex;
    flex-direction: row;
}
.radio-group-column {
    display: flex;
    flex-direction: column;
}
</style>
